<template>
  <div class="details">
    <van-nav-bar
      :title="detail[0].dishes"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :fixed="true"
      :placeholder="true"
    >
      <template #right>
        <van-icon v-if="iscoll" name="star" color="#ffa302" size="20px" />
        <van-icon v-else name="star-o" size="20px" />
      </template>
    </van-nav-bar>
    <van-image
      contain
      width="100%"
      height="100%"
      :src="`/img/menupic/${detail[0].menu_picture}`"
    ></van-image>
    <van-cell class="title" :title="detail[0].dishes"></van-cell>
    <van-cell class="titleitem" :border="false">{{
      detail[0].introduce
    }}</van-cell>
    <br />
    <van-cell class="yongliao" title="用料"> </van-cell>
    <van-cell-group class="tongliaoZ">
      <van-cell
        v-for="(item, i) of material"
        :key="i"
        :title="item.food_material"
        :value="item.dosage"
      ></van-cell>
    </van-cell-group>
    <br />
    <van-cell class="yongliao" title="步骤"> </van-cell>
    <van-cell-group class="tongliaoZ">
      <van-cell v-for="(item, i) of step" :key="i" :title="`步骤${i + 1}`">
        <template #label>
          <van-image
            width="100%"
            height="300px"
            :src="`/img/menupic/${item.step_picture}`"
          ></van-image>
          <van-cell class="titleitem buzhou" :border="false">{{
            item.step_content
          }}</van-cell>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell class="yongliao" title="小贴士">
      <template #label>
        <van-cell class="remark" :border="false"
          >测试文字测试文字测试文字测试文字测试文字测试文字字</van-cell
        >
      </template>
    </van-cell>
  </div>
</template>
<script>
export default {
  props: ["cid","cname"],
  data() {
    return {
      a: true,
      detail: [{ dishes: "" }],
      material: "",
      step: "",
      iscoll: false,
    };
  },
  methods: {
    onClickRight() {
      console.log(!this.$store.state.islogin);
      if (this.$store.state.islogin) {
        this.axios
          .post(
            `/users/addcollect`,
            `uid=${this.$store.state.userid}&cid=${this.cid}`
          )
          .then((result) => {
            if (result.data.code == 200) {
              this.iscoll = true;
              this.$notify({
                type: "success",
                message: "收藏成功",
                duration: 1000,
              });
            } else if (result.data.code == 201) {
              this.axios
                .post(
                  `/users/uncollect`,
                  `uid=${this.$store.state.userid}&cid=${this.cid}`
                )
                .then((result) => {
                  this.$notify({
                    type: "success",
                    message: "取消成功",
                    duration: 1000,
                  });
                  this.iscoll = false;
                });
            }
          });
      } else {
        this.$notify({
          type: "success",
          message: "请登入",
          duration: 1000,
        });
        // console.log(this.$store.state.islogin)
      }
    },
    onClickLeft() {
      if(this.cname==1){
        this.$router.push(`/menu/${this.detail[0].category_id}`);
      }else{
        this.$router.go(-1)
      }
    },
    getDetail() {
      return this.axios.get(`/menu/hot?cid=${this.cid}`);
    },
    getIngredient() {
      return this.axios.get(`/menu/ingredient?cid=${this.cid}`);
    },
    getStep() {
      return this.axios.get(`/menu/step?cid=${this.cid}`);
    },
  },
  mounted() {
    this.axios
      .all([this.getDetail(), this.getIngredient(), this.getStep()])
      .then(
        this.axios.spread((acct, perms, result) => {
          this.detail = acct.data.result;
          this.material = perms.data.result;
          this.step = result.data.result;
        })
      );
      console.log()
    if (this.$store.state.islogin == 1) {
      this.axios
        .post(
          `/users/iscollect`,
          `uid=${this.$store.state.userid}&cid=${this.cid}`
        )
        .then((result) => {
          console.log(result);
          if (result.data.code == 201) {
            this.iscoll = true;
          } else {
            this.iscoll = false;
          }
        });
    }
  },
};
</script>
<style lang="scss">
.details {
  .van-icon-arrow-left::before {
    color: black;
  }
  .title {
    text-align: center;
    font-size: 20px;
  }
  .titleitem {
    font-size: 16px;
  }
  .yongliao {
    font-size: 18px;
    font-weight: 600;
  }
  .tongliaoZ {
    // padding-right: 50px;
    .van-cell {
      font-size: 16px;
    }
  }
  .buzhou {
    padding: 10px 0px;
  }
  .remark {
    padding: 10px 0px;
    font-weight: 500;
    font-size: 16px;
  }
}
</style>